// eslint-disable-next-line no-unused-vars
const { Configuration } = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');

/**
 * @type { Configuration }
 */
module.exports = {
    entry: './src/index.js',
    output: {
        filename: './js/[name]-[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        chunkFilename: './js/[contenthash].js',
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            js: path.resolve(__dirname, 'src/js'),
        },
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
        }),
        new VueLoaderPlugin(),
        new ProgressBarPlugin(), // 控制台编译可查看到进度
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[contenthash:8].css',
        }),
        // new CopyWebpackPlugin({
        //     patterns: [
        //         //  { from: 'src/assets/audio', to: 'audio' },
        //     ],
        // }),
    ],
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[contenthash:7][ext]',
                },
                exclude: /node_modules/,
                // exclude: /node_modules/,
                // webpack 旧版本使用 url-loader
                // use: [{
                //   loader: 'url-loader',
                //   options: {
                //     limit: 5 * 1024, // 小于这个时将会已base64位图片打包处理
                //     name: './[name].[hash:5].[ext]',
                //     outputPath: 'images', // 图片文件输出的文件夹
                //   },
                // }],
            },
            {
                test: /\.vue$/,
                use: ['vue-loader'],
            },
            {
                test: /\.tsx?$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/.vue$/],
                    },
                }],
                exclude: /node_modules/,
            },
            {
                test: /\.(jsx?)$/,
                use: ['babel-loader'],
                exclude: /node_modules/,
            },
        ],
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 0,
            // 限制每个包体积不超过244KB
            maxSize: 244 * 1024 * 8,
        },
    },
};
